<template>
    <div class="shoppingCart">
        <div class="labelNav acea-row row-around row-middle">
            <div class="item">
                <span class="iconfont icon-xuanzhong"></span>100%正品保证
            </div>
            <div class="item">
                <span class="iconfont icon-xuanzhong"></span>所有商品精挑细选
            </div>
            <div class="item">
                <span class="iconfont icon-xuanzhong"></span>售后无忧
            </div>
        </div>
        <div class="nav acea-row row-between-wrapper">
            <div>
                商品数量 <span class="num font-color-red">{{ count }}</span>
            </div>
        </div>
        <div v-if="cartList.valid.length > 0 || cartList.invalid.length > 0">
            <div class="list">
                <div
                        class="item acea-row row-between-wrapper"
                        v-for="(item, index) in cartList.valid"
                        :key="index"
                >
                    <div class="select-btn">
                        <div class="checkbox-wrapper">
                            <label class="well-check">
                                <input
                                        type="checkbox"
                                        name=""
                                        value=""
                                        :checked="item.checked"
                                        @click="switchSelect(index)"
                                />
                                <i class="icon"></i>
                            </label>
                        </div>
                    </div>
                    <div class="picTxt acea-row row-between-wrapper">
                        <div
                                class="pictrue"
                                @click="$router.push({ path: '/detail/' + item.id })"
                        >
                            <img :src="item.image" />
                        </div>
                        <div class="text">
                            <div class="line1">{{ item.store_name }}</div>
                            <div class="money">￥{{ item.price }}</div>
                        </div>
                        <div class="carnum acea-row row-center-wrapper">
                            <div
                                    class="reduce"
                                    :class="cartList.valid[index].cart_num <= 1 ? 'on' : ''"
                                    @click.prevent="reduce(index)"
                            >
                                -
                            </div>
                            <div class="num">{{ item.cart_num }}</div>
                            <div
                                    class="plus"
                                    :class="
                  cartList.valid[index].cart_num >= cartList.valid[index].stock
                    ? 'on'
                    : ''
                "
                                    @click.prevent="plus(index)"
                            >
                                +
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--购物车暂无商品-->
        <div
                class="noCart"
                v-if="cartList.valid.length === 0 && cartList.invalid.length === 0"
        >
            <div class="pictrue"><img src="@assets/images/noCart.png" /></div>
        </div>
        <div style="height:2.1rem"></div>
        <div
                class="footer acea-row row-between-wrapper"
                v-if="cartList.valid.length > 0"
        >
            <div>
                <div class="select-btn">
                    <div class="checkbox-wrapper">
                        <label class="well-check">
                            <input
                                    type="checkbox"
                                    name=""
                                    value=""
                                    :checked="isAllSelect && cartCount > 0"
                                    @click="allChecked"
                            />
                            <i class="icon"></i>
                            <span class="checkAll">全选 ({{ cartCount }})</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="money acea-row row-middle" v-if="footerswitch === false">
                <span class="font-color-red">￥{{ countmoney }}</span>
                <div class="placeOrder bg-color-red" @click="placeOrder">立即下单</div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        getCartList, postCartAdd
    } from "@api/user";
    import { mul, add } from "@utils/bc";
    import cookie from "@utils/store/cookie";

    const CHECKED_IDS = "cart_checked";

    export default {
        name: "Cart",
        props: {},
        data: function() {
            return {
                cartList: { invalid: [], valid: [] },
                isAllSelect: false,
                cartCount: 0,
                countmoney: 0,
                goodsHidden: true,
                footerswitch: false,
                count: 0,
                checkedIds: [],
                loaded: false
            };
        },
        watch: {
            $route(n) {
                if (n.name === "ShoppingCart") {
                    this.carnum();
                    this.countMoney();
                    this.getCartList();
                    this.goodsHidden = true;
                    this.footerswitch = false;
                }
            }
        },
        mounted: function() {
            let that = this;
            that.carnum();
            that.countMoney();
            that.getCartList();
        },
        methods: {
            getCartList: function() {
                let that = this;
                getCartList().then(res => {
                    that.cartList = res.data;
                    let checkedIds = cookie.get(CHECKED_IDS) || [];
                    if (!Array.isArray(checkedIds)) checkedIds = [];
                    this.cartList.valid.forEach(cart => {
                        if (checkedIds.indexOf(cart.id) !== -1) cart.checked = true;
                    });
                    if (checkedIds.length) {
                        that.checkedIds = checkedIds;
                        that.isAllSelect = checkedIds.length === this.cartList.valid.length;
                        that.carnum();
                        that.countMoney();
                    }
                    this.loaded = true;
                });
            },
            //立即下单；
            placeOrder: function() {
                let that = this,
                    list = that.cartList.valid,
                    id = [],
                    num = [];
                list.forEach(function(val) {
                    if (val.checked === true) {
                        id.push(val.id);
                        num.push(val.cart_num);
                    }
                });
                if (id.length === 0) {
                    that.$dialog.toast({ mes: "请选择产品" });
                    return;
                }
                let q = {
                    productId: id,
                    cartNum: num,
                    new: 1,
                };
                postCartAdd(q).then(function(res){
                    that.$router.push({path: "/user/submit/"+res.data.productId});
                }).catch(function(res){
                    that.$dialog.toast({msg: res.msg});
                });
            },
            //加
            plus: function(index) {
                let that = this;
                let list = that.cartList.valid[index];
                list.cart_num++;
                if (list.attrInfo) {
                    if (list.cart_num >= list.attrInfo.stock) {
                        that.$set(list, "cart_num", list.attrInfo.stock);
                    }
                } else {
                    if (list.cart_num >= list.stock) {
                        that.$set(list, "cart_num", list.stock);
                    }
                }
                that.carnum();
                that.countMoney();
            },
            //减
            reduce: function(index) {
                let that = this;
                let list = that.cartList.valid[index];
                list.cart_num--;
                if (list.cart_num < 1) {
                    that.$set(list, "cart_num", 1);
                }
                that.carnum();
                that.countMoney();
            },
            //单选
            switchSelect: function(index) {
                let that = this,
                    cart = that.cartList.valid[index],
                    i = this.checkedIds.indexOf(cart.id);
                cart.checked = !cart.checked;

                if (i !== -1) this.checkedIds.splice(i, 1);
                if (cart.checked) {
                    this.checkedIds.push(cart.id);
                }
                let len = that.cartList.valid.length;
                let selectnum = [];
                for (let i = 0; i < len; i++) {
                    if (that.cartList.valid[i].checked === true) {
                        selectnum.push(true);
                    }
                }
                that.isAllSelect = selectnum.length === len;
                that.$set(that, "cartList", that.cartList);
                that.$set(that, "isAllSelect", that.isAllSelect);
                cookie.set(CHECKED_IDS, that.checkedIds);
                that.carnum();
                that.countMoney();
            },
            //全选
            allChecked: function() {
                let that = this;
                let selectAllStatus = that.isAllSelect;
                selectAllStatus = !selectAllStatus;
                let checkedIds = [];
                // for (let i = 0; i < array.length; i++) {
                //   array[i].checked = selectAllStatus;
                //   checked.push()
                // }
                that.cartList.valid.forEach(cart => {
                    cart.checked = selectAllStatus;
                    if (selectAllStatus) checkedIds.push(cart.id);
                });
                that.$set(that, "cartList", that.cartList);
                that.$set(that, "isAllSelect", selectAllStatus);
                this.checkedIds = checkedIds;
                cookie.set(CHECKED_IDS, checkedIds);
                that.carnum();
                that.countMoney();
            },
            //数量
            carnum: function() {
                let that = this;
                var carnum = 0;
                var array = that.cartList.valid;
                for (let i = 0; i < array.length; i++) {
                    if (array[i].checked === true) {
                        carnum += parseInt(array[i].cart_num);
                    }
                }
                that.$set(that, "cartCount", carnum);
            },
            //总共价钱；
            countMoney: function() {
                let that = this;
                let carmoney = 0;
                let array = that.cartList.valid;
                for (let i = 0; i < array.length; i++) {
                    if (array[i].checked === true) {
                        carmoney = add(carmoney, mul(array[i].cart_num, array[i].price));
                    }
                }
                that.countmoney = carmoney;
            }
        }
    };
</script>
